<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="header">
			<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/箭头.png" @click="back"></image>
			<view class="title1">领券中心</view>
		</view>

		<!-- 优惠券列表 -->
		<view class="coupon">
			<!-- 优惠券1 -->
			<view class="coupon-item" v-for="(item,id) in list" :key="id">
				<view class="left">
					<view style="color: white; margin-top: 30rpx">¥</view>
					<!-- <view class="price">{{item.discount_price}}</view> -->
					<view class="price">20</view>
				</view>
				<view class="right">
					<view class="right-top">
						<view class="info">
							<view class="title">
								<!-- <text>满{{item.full_price}}元可用</text> -->
								<text>满200元可用</text>
							</view>
							<view class="desc">
								<!-- <text>限{{item.shopname}}使用</text> -->
								<text>限xx加油站使用</text>
							</view>
						</view>
<!-- 						<view :class="{button:true, button1:item.user_id !== 0}" @click="onchange(item.id,item.user_id)">
							<text v-if="item.user_id !== 0">已领取</text>
							<text v-else>领取</text>
						</view> -->
						<view :class="['button', { 'button1': item.user_id !== 0, 'disabled': item.user_id !== 0 }]" 
						      :style="{ backgroundColor: item.user_id !== 0 ? '#d8d8d8' : '#ff6908' }" 
						      @click="onchange(item.id, item.user_id, id)" 
						      :disabled="item.user_id !== 0">
						  <text>{{ item.user_id !== 0 ? '已领取' : '领取' }}</text>
						</view>

					</view>
					<view class="date">
						<!-- <text>{{formatDate(item.end_time)}}</text> -->
						<text>2020..4.11——2023.05.11</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/api.js'
export default {
	data() {
		return {
			list:[],
			id:null,		
		};
	},
	methods: {
		back(){
			uni.navigateBack({
				data:1
			})
		},
		// onchange(id){
		// 	// 调用后端接口更新状态，刷新页面
		// 	this.list[index].show = true;
		// },
		async onchange(id,user_id) {
			console.log(id);
			console.log(user_id);
			if (user_id === 0) {
				try {
					// 调用修改接口来更新 user_id
					const res = await request({
						url: '/usercoupon/updateCoupon', // 你的更新接口地址
						method: 'POST',
						data: {
							id: id, // 当前优惠券的id
							userId:this.id // 当前页面的 user_id
						}
					});

					// 如果请求成功，更新列表中的 user_id
					if (res == 1) {
						this.list[id].user_id = this.id;
						uni.showToast({
							title: '领取成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '领取失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error(error);
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					});
				}
			}
		},
		//获取
		async UserCoupon(){
				const res = await request({
					url: `/usercoupon/selectById?userId=${this.id}`,
				});
				this.list = res;
				console.log("优惠券",this.list);
			},
			//日期格式处理
			formatDate(date) {
			    const d = new Date(date);
			    const year = d.getFullYear();
			    const month = (d.getMonth() + 1).toString().padStart(2, '0');
			    const day = d.getDate().toString().padStart(2, '0');
			    return `${year}-${month}-${day}`;
			}
		},
		
		onLoad(option){
			this.id = parseInt(option.id, 10);
			console.log("获取到的id",this.id);
			this.UserCoupon();
		}
	}

</script>

<style>
/* 页面  布局 */
.container {
	background-color: #f5f5f5;
	height: 100%;
}

/* 标题样式 */
.header {
	background-color: #007aff;
	height: 400rpx;
	padding: 40rpx;
	color: #fff;
	text-align: center;
	display: flex;
}
 .header image {
		color: white;
		width: 35rpx;
		height: 35rpx;
	}
.title1{
	font-size: 36rpx;
	color: white;
	margin-left: 220rpx;
}

.title {
	font-size: 36rpx;
	/* margin-left: 200rpx; */
}

/* 优惠券列表样式 */
.coupon {
	width: 90%;
	margin: 0 auto;
	margin-top: -340rpx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 16rpx;
}

/* 单个优惠券样式 */
.coupon-item {
	display: flex;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}

/* 左侧价格部分 */
.left {
	padding: 80rpx 0;
	width: 35%;
	background-color:#ff8b66 ;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 16rpx;
	position: relative;
	overflow: hidden;
}
/* 伪元素实现反向圆角 */
.left::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 20rpx;
	height: 20rpx;
	background: #ffffff; /* 下部分白色 */
	border-bottom-left-radius: 50px; /* 上边的内凹圆角 */
	margin-left: 204rpx;
	margin-bottom: 260rpx;
}
/* 伪元素实现反向圆角 */
.left::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 20rpx;
	height: 20rpx;
	background: #ffffff; /* 下部分白色 */
	border-top-left-radius: 50px; /* 上边的内凹圆角 */
	margin-left: 205rpx;
}

.price {
	font-size: 90rpx;
	font-weight: bold;
	color: #fff;
}

/* 右侧内容部分 */
.right {
	width: 65%;
	padding: 20rpx;
	justify-content: space-between;
	border-radius: 16rpx;
	background-color: #fff2ea;
	position: relative;
	overflow: hidden;
}
/* 伪元素实现反向圆角 */
.right::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 20rpx;
	height: 20rpx;
	background: #ffffff; /* 下部分白色 */
	border-top-right-radius: 50px; /* 上边的内凹圆角 */
}
/* 伪元素实现反向圆角 */
.right::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 20rpx;
	height: 20rpx;
	background: #ffffff; /* 下部分白色 */
	border-bottom-right-radius: 50px; /* 上边的内凹圆角 */
	margin-bottom: 260rpx;
}
.right-top{
	display: flex;
}

.info .title {
	font-size: 40rpx;
	font-weight: bold;
	color: #ff7a42;
	margin-top: 20rpx;
}

.desc {
	margin-top: 10rpx;
	margin-bottom: 60rpx;
	font-size: 26rpx;
	font-weight: 500;
}

.date {
	font-size: 24rpx;
	color: #999;
	margin-top: 20rpx;
}
.button {
	height: 60rpx;
	width: 150rpx;
	margin-top: 110rpx;
	margin-left: 20rpx;
	border-radius: 50rpx;
	font-size: 28rpx;
	background-color: #ff6908;
	color: #fff;
	text-align: center;
	line-height: 60rpx;
}

.button1{
	background-color: #d8d8d8;
}
.disabled {
  background-color: #d8d8d8;
  color: #999;
  pointer-events: none; /* 禁止点击 */
}
</style>
